<template>
  <div class="wrap">
    <div class="header">
      <p class="title">商品分类</p>
      <div class="searchbox">
        <input type="text" placeholder="小米扫地机器人">
        <span class="iconfont">&#xe622;</span>
      </div>
    </div>
    <div class="main">
      <div class="nav">
        <ul>
          <li v-for="(item,index) in navlist" :key="index" @click="getContent(item)">{{item}}</li>
        </ul>
      </div>  
      <div class="content">
        <div class="item" v-for="(item,index) in shoplist" :key="index">
          <img :src="item.img_big_logo" @click="linkdetail" :data-goodsid="item.goods_id">
        </div>
      </div>
    </div>
  </div>
  <FooterTab :pagename="pagename"></FooterTab>
</template>
<script>
// 引入全局组件FooterTab
import FooterTab from '../../components/FooterTab' 
// 引入axios
import axios from 'axios';
// 引入ref
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 获取分类列表数据
const Getnavlist = ()=>{
  // 需要响应型变量去接收返回值
  const navlist = ref([])
  const getNavlist = async ()=>{
    const res = await axios({
      methods: "get",
      url: "http://localhost:8888/goods/category",
    })
    navlist.value = res.data.list
  }
  return {getNavlist,navlist}
}
// 获取商品
const GeteContent = ()=>{
  // 需要响应型变量去接收返回值
  const shoplist = ref([])
  const getContent = async (item)=>{
    const word = item || "童装玩具"
    const res = await axios({
      methods: "get",
      url: "http://localhost:8888/goods/list?category="+word+"&pagesize=36",
    })
    shoplist.value = res.data.list
  }
  return {getContent,shoplist}
}
// 点击跳转商品详情
const Linkdetail = ()=>{
  const router = useRouter() 
  const linkdetail = (e)=>{
    const goodsid = e.currentTarget.dataset.goodsid
    router.push({name:"detail",query:{goodsid}})
  }
  return { linkdetail }
}
export default {
  name:"ClassifyView",
  components: {
    FooterTab
  },
  setup() {
    // 标记当前页面
    const pagename = 'classify'
    // 调用获取分类导航数据
    const {getNavlist, navlist} = Getnavlist()
    getNavlist()
    // 调用获取商品
    const {getContent,shoplist} = GeteContent()
    getContent()
    // 点击跳转详情页
    const {linkdetail} = Linkdetail()
    // 数据抛出去后，组件就可以使用
    return {pagename,navlist,getContent,shoplist,linkdetail}
  }

}
</script>
<style scoped lang="scss">
.wrap {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: .5rem;
  display: flex;
  background-color: white;
  .title {
    width: .9rem;
    font-size: .175rem;
    font-weight: 500;
    line-height: .5rem;
    text-align: center;
    color: #333;
  }
  .searchbox {
    flex: 1;
    padding: .1rem;
    position: relative;
    input {
      width: 100%;
      height: 100%;
      border-radius: .15rem;
      border: none;
      text-indent: .3rem;
      background-color: #f9f9f2;
    }
    span {
      position: absolute;
      z-index: 999;
      left: 6%; 
      font-size: .18rem;
      color: rgb(192,192,192);
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.main {
  flex: 1; 
  display: flex;
  overflow: auto;
  padding-bottom: .5rem;
  .nav {
    width: .9rem;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    li {
      text-align: center;
      height: .5rem;
      line-height: .5rem;
      font-size: .13rem;
      color: #666; 
    }
    li:hover {
      background-color: white;
      color: #333;
      font-weight: bold;
    }
  }
  .content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start; // 元素挨着
    overflow: auto;
    .item {
      width: .8rem;
      height: .8rem;
      margin: .05rem 0;
      padding: 0rem .072rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: .1rem;
      }
    }
  }
}
</style>